import 'package:flutter/material.dart';
import 'package:kiomax/pages/vendor/vendor_list_page.dart';
import '../../config/string_config.dart';
import '../../config/color_config.dart';
import '../../config/text_style_config.dart';
import '../../config/image_config.dart';
import '../../utils/screen_util.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  bool _isPasswordVisible = false;
  bool _rememberMe = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    _usernameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            width: ScreenUtil.getScreenWidth,
            padding: EdgeInsets.symmetric(
              horizontal: ScreenUtil.setWidth(24),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: ScreenUtil.setHeight(40)),
                // Logo
                Image.asset(
                  ImageConfig.kiosoftLogo,
                  width: ScreenUtil.setWidth(120),
                  height: ScreenUtil.setHeight(40),
                ),
                // Welcome Text
                Text(
                  StringConfig.welcomeToKioMaxComma,
                  style: TextStyle(
                    fontSize: ScreenUtil.setSp(20),
                    fontWeight: FontWeight.w600,
                    color: ColorConfig.textPrimary,
                  ),
                ),
                SizedBox(height: ScreenUtil.setHeight(4)),
                Text(
                  StringConfig.loginToOperator,
                  style: TextStyle(
                    fontSize: ScreenUtil.setSp(14),
                    color: ColorConfig.textPrimary,
                  ),
                ),
                SizedBox(height: ScreenUtil.setHeight(4)),
                Offstage(
                  offstage: false,
                  child: Text(
                    StringConfig.loginErrorTip,
                    style: TextStyle(
                      fontSize: ScreenUtil.setSp(14),
                      color: ColorConfig.textPrimaryError,
                    ),
                  ),
                ),
                SizedBox(height: ScreenUtil.setHeight(32)),
                // Username Input
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      StringConfig.username,
                      style: TextStyle(
                        fontSize: ScreenUtil.setSp(14),
                        fontWeight: FontWeight.w500,
                        color: ColorConfig.textPrimary,
                      ),
                    ),
                    SizedBox(height: ScreenUtil.setHeight(8)),
                    TextField(
                      controller: _usernameController,
                      decoration: InputDecoration(
                        hintText: StringConfig.usernameHint,
                        hintStyle: TextStyle(
                          color: ColorConfig.textPrimary.withOpacity(0.3),
                        ),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide:
                              BorderSide(color: ColorConfig.inputBorder),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide:
                              BorderSide(color: ColorConfig.inputBorder),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: BorderSide(color: ColorConfig.primary),
                        ),
                        contentPadding: EdgeInsets.symmetric(
                          horizontal: ScreenUtil.setWidth(16),
                          vertical: ScreenUtil.setHeight(12),
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: ScreenUtil.setHeight(24)),
                // Password Input
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      StringConfig.password,
                      style: TextStyle(
                        fontSize: ScreenUtil.setSp(14),
                        fontWeight: FontWeight.w500,
                        color: ColorConfig.textPrimary,
                      ),
                    ),
                    SizedBox(height: ScreenUtil.setHeight(8)),
                    TextField(
                      controller: _passwordController,
                      obscureText: !_isPasswordVisible,
                      decoration: InputDecoration(
                        hintText: StringConfig.passwordHint,
                        hintStyle: TextStyle(
                          color: ColorConfig.textPrimary.withOpacity(0.3),
                        ),
                        suffixIcon: IconButton(
                          icon: Icon(
                            _isPasswordVisible
                                ? Icons.visibility_off
                                : Icons.visibility,
                            color: ColorConfig.primary,
                            size: ScreenUtil.setSp(20),
                          ),
                          onPressed: () {
                            setState(() {
                              _isPasswordVisible = !_isPasswordVisible;
                            });
                          },
                        ),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide:
                              BorderSide(color: ColorConfig.inputBorder),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide:
                              BorderSide(color: ColorConfig.inputBorder),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: BorderSide(color: ColorConfig.primary),
                        ),
                        contentPadding: EdgeInsets.symmetric(
                          horizontal: ScreenUtil.setWidth(16),
                          vertical: ScreenUtil.setHeight(12),
                        ),
                      ),
                    ),
                  ],
                ),
                SizedBox(height: ScreenUtil.setHeight(16)),
                // Remember Me
                Row(
                  children: [
                    SizedBox(
                      height: 24,
                      width: 24,
                      child: Checkbox(
                        value: _rememberMe,
                        onChanged: (value) {
                          setState(() {
                            _rememberMe = value ?? false;
                          });
                        },
                        activeColor: ColorConfig.primary,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(4),
                        ),
                      ),
                    ),
                    SizedBox(width: ScreenUtil.setWidth(8)),
                    Text(
                      StringConfig.rememberMe,
                      style: TextStyle(
                        fontSize: ScreenUtil.setSp(14),
                        color: ColorConfig.textPrimary,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: ScreenUtil.setHeight(32)),
                // Login Button
                SizedBox(
                  width: double.infinity,
                  height: ScreenUtil.setHeight(48),
                  child: ElevatedButton(
                    onPressed: () {
                      Navigator.pushReplacement(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const VendorListPage(),
                              settings: const RouteSettings(name: '/home')));
                    },
                    style: ElevatedButton.styleFrom(
                      backgroundColor: ColorConfig.buttonDisabled,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                      elevation: 0,
                    ),
                    child: Text(
                      StringConfig.logIn,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: ScreenUtil.setSp(16),
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
